<template>
	<view class="box">
		<view class="leixing" v-for="(item,index) in list" :key='index'>
			<view class="mingcheng">
				名称：<text>{{item.tatle}}</text>
			</view>
			<view class="biaoqian">
				类型：<text>{{item.lx}}</text>
			</view>
			<view class="zuoyong">
				作用：<text>{{item.zy}}</text>
			</view>
			<view class="lianjie">
				地址：<text>{{item.lj}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					'tatle': 'animate css',
					'lx': '第三方css动画类库',
					'zy': '是一款简单方便的css动画类库，只需要引用类名就可以实现多种简单有趣的效果，同时也可以自定义添加想要的动画，在vue中使用遵循vue css动画的语法，同样只需要找到自己想要的动画效果引用类名就行',
					'lj': 'https://daneden.github.io/animate.css/'
				}, {
					'tatle': 'swiper',
					'lx': '第三方轮播插件',
					'zy': '是一款轮播插件，使前端人员不必发愁复杂的轮播图，直接引用方便快捷，含有多种类型的轮播效果，可以内部查看演示，选取自己想要的轮播效果，通过查看源码的方式将代码粘贴到自己的项目内部，jq，vue都支持引用',
					'lj': 'https://www.swiper.com.cn/'
				},{
					'tatle': 'echarts',
					'lx': '第三方图表插件',
					'zy': '是一款图表插件，通过js实现各种丰富类型的统计图，富有简单的动效，需要查看官方的api，根据自己的需求添加不同参数，达到灵活的控制自己的图，也有简单的例子，可以直接查看代码，复制使用',
					'lj': 'https://www.echartsjs.com/zh/index.html'
				},{
					'tatle': 'iconfont',
					'lx': '图标文本',
					'zy': '是一种图标文本网站，一些简单的图标可以使用文本的方式实现，这样减小了页面的请求图片的时间，缩短了界面渲染的时间，网站内部含有种类及其丰富的图标，直接搜索查找自己需要的图标，加入购物车之后直接下载代码，将代码文件引入项目中，通过类名的方法使用，当然官方有3种引用的方法，可以选择自己习惯的方法使用',
					'lj': 'https://www.iconfont.cn/'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		background: #8BB4E0;
		overflow: hidden;
	}

	.leixing {
		width: 96%;
		margin: 20rpx auto;
		border: 2px solid #007AFF;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 10rpx #333333;
		background: white;
		box-sizing: border-box;
	}

	text {
		color: #CE0909;
	}

	.mingcheng {
		width: 96%;
		font-size: 22px;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 40rpx;
	}

	.biaoqian {
		width: 96%;
		font-size: 18px;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.zuoyong {
		width: 96%;
		font-size: 18px;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.zuoyong>text {
		font-size: 16px;
		color: #999999;
	}

	.lianjie {
		width: 96%;
		font-size: 18px;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 40rpx;
	}
	.lianjie>text{
		font-size: 14px;
	}
</style>
